<!--
Date: 2025-08-13
Copyright (c) 2025 Industrial Software Feature Database
-->
<template>
  <el-dialog v-if="props.dialogVisible" v-model="props.dialogVisible" title="添加对比对象" width="1200px" append-to-body :before-close="closeDialog">
    <el-form size="small" label-width="120">
      <el-form-item label="所属机型：" required>
        <el-select style="width: 480px" v-model="formData.modelNumber" clearable placeholder="请选择机型" @change="modelChange">
          <el-option v-for="item in modelNumberList" :label="item.modelName" :value="item.modelNumber" :key="item.modelNumber"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="所属批次：" required>
        <el-select style="width: 480px" v-model="formData.batchNumber" filterable clearable placeholder="请选择批次号" @change="batchChange">
          <el-option v-for="(item, index) in batchList" :label="batchList[index]" :value="batchList[index]" :key="index"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="结果轮次：" required>
        <el-select style="width: 480px" v-model="formData.roundNumber" clearable placeholder="请选择结果轮次" @change="roundChange">
          <el-option v-for="(item, index) in roundList" :label="roundList[index]" :value="roundList[index]" :key="roundList[index]"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <el-table :data="op2FileList">
      <el-table-column label="OP2文件名称" align="center" prop="fileName" fixed="left">
        <template #default="scope">
          <span>{{ scope.row.fileName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="所属轮次" align="center" prop="roundNumber"> </el-table-column>
      <el-table-column label="文件路径" align="center" prop="location" width="220"> </el-table-column>
      <el-table-column label="备注" align="center" prop="remarks"> </el-table-column>
      <el-table-column label="上传日期" align="center" prop="uploadTimeStr"></el-table-column>
      <el-table-column label="操作" align="center" width="100">
        <template #default="scope">
          <el-button size="small" link type="primary" icon="View" @click="addOne(scope.row)">添加</el-button>
        </template>
      </el-table-column>
    </el-table>
    <h3 class="compare-title"><span class="title">已选结果库文件：</span></h3>
    <el-table :data="hasChooseFileList">
      <el-table-column label="OP2文件名称" align="center" prop="fileName" fixed="left">
        <template #default="scope">
          <span>{{ scope.row.fileName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="所属轮次" align="center" prop="roundNumber"> </el-table-column>
      <el-table-column label="文件路径" align="center" prop="location" width="220"> </el-table-column>
      <el-table-column label="备注" align="center" prop="remarks"> </el-table-column>
      <el-table-column label="上传日期" align="center" prop="uploadTimeStr"></el-table-column>
      <el-table-column label="操作" align="center" width="100">
        <template #default="scope">
          <el-button size="small" link type="primary" icon="View" @click="removeOne(scope.row)">移除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <template #footer>
      <div class="dialog-footer" style="text-align: center;">
        <el-button size="small" @click="closeDialog">取消</el-button>
        <el-button type="primary" size="small" @click="sureChoose">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { getBatchNo, getRoundNo, getMeshModelStructureList, getModelSectionInfoBySectionName, getMeshOp2DataList } from '@/api/dataAcquisition';
const emit = defineEmits(['handleEvent']);
const props = defineProps(['dialogVisible', 'sectionNames']);
const loading = ref(false);
const modelNumberList = ref([]);
const batchList = ref([]);
const roundList = ref([]);
const op2FileList = ref([]);
const hasChooseFileList = ref([]);
const formData = ref({
  modelNumber: '',
  sectionNumber: '',
  batchNumber: '',
  roundNumber: '', 
})
watch(formData, (newVal, oldVal) => {
  if (formData.value.modelNumber && formData.value.sectionNumber && formData.value.roundNumber && formData.value.batchNumber) {
    getMeshOp2DataList({status: 2, modelNumber: formData.value.modelNumber, sectionNumbers: formData.value.sectionNumber, roundNumber: formData.value.roundNumber, batchNumber: formData.value.batchNumber, pageQuery: {pageNum:1, pageSize: 9999}}).then(res => {
      if (res) {
        op2FileList.value = res.rows;
      }
    })
  }
},
{ 
  deep: true,      // 启用深度监听
  immediate: true  // 立即触发一次
})
const handleSelectionChange = (val) => {
  val.forEach(item => {
    if (!hasChooseFileList.value.some(hasItem => hasItem.id == item.id)) {
      hasChooseFileList.value.push(item);
    }
  })
}

const addOne = (row) => {
  if (!hasChooseFileList.value.some(item => item._id == row._id)) {
    hasChooseFileList.value.push(row);
  }
}

const removeOne = (row) => {
  hasChooseFileList.value = hasChooseFileList.value.filter(item => item._id != row._id);
}

// 获取机型
const getModelList = () => {
  getMeshModelStructureList({parentId: 0, pageSize: 999}).then(res => {
    if (res) {
      modelNumberList.value = res.rows;
    }
  })
}
// 获取批次号 && 轮次号
const modelChange = (val) => {
  if (val) {
    formData.batchNumber = '';
    formData.roundNumber = '';
    const fItem = modelNumberList.value.find(item => item.modelNumber == val);
    formData.value = {
      ...formData.value,
      ...fItem
    } 
    getBatchNo({modelNumber: val}).then(res => {
      if (res) {    
        batchList.value = res.data
      }
    })
    getRoundNo({modelNumber: val}).then(res => {
      if (res) {    
        roundList.value = res.data
      }
    })
  }
}
const batchChange = () => {
  // searchOp2FileByParams();
}
const roundChange = () => {
  // searchOp2FileByParams();
}
const closeDialog = () => {
  emit('handleEvent', {type: 'cancel'});
};

const sureChoose = () => {
  emit('handleEvent', {type: 'AddObj', data: {
    hasChooseFileList: hasChooseFileList.value,
    formData: formData.value
  }});
};

onMounted(() => {
  // getModelList();
  getModelSectionInfoBySectionName({sectionNames: props.sectionNames.join(',')}).then(res => {
    modelNumberList.value = res.data || [];
  })
});
</script>

<style lang="scss" scoped>
.model-batch {
  padding: 10px;
  span {
    margin-right: 20px;
  }
}
.compare-title {
  .title {
    font-size: 14px;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.85);
    &::before {
      content: "";
      display: inline-block;
      width: 5px;
      height: 14px;
      margin-right: 5px;
      background-color: #409EFF;
      vertical-align: middle;
      margin-top: -3px;
    }
  }
}
</style>
